<template>
  <div class="tree-wrap">
    <el-select
      :value="selectedData"
      multiple
      collapse-tags
      class="select-checkbox"
      popper-class="select-checkbox-popup"
      @remove-tag="removeTag"
      @visible-change="selectVisible"
    >
      <el-option :value="categoryCode" style="height: auto">
        <el-tree
          ref="tree"
          :data="treeData"
          node-key="categorycode"
          accordion
          show-checkbox
          highlight-current
          :props="defaultProps"
          :filter-node-method="filterNode"
          @check-change="checkNode"
        />
      </el-option>
      <li class="fixed-footer">
        <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      </li>
    </el-select>
  </div>

</template>

<script>
export default {
  model: {
    prop: 'selectedValue',
    event: 'change'
  },
  props: {
    selectedValue: {
      type: Array,
      default: () => ([])
    },
    dataList: {
      type: Array,
      default: () => ([])
    },
    placeholder: {
      type: String,
      default: '请选择'
    }
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      treeData: [],
      categoryName: [],
      categoryCode: '',
      selectedData: '',
      checkAll: false,
      filterValue: ''
    }
  },
  computed: {},
  watch: {
    selectedValue(newVal) {
      this.value = newVal
    }
  },
  mounted() {
    this.fetchCategoryInfoList()
  },
  methods: {
    checkNode() {
      const categoryCode = []
      const categoryName = []
      const category = this.$refs.tree.getCheckedNodes()
      category.forEach(item => {
        categoryCode.push(item.categorycode)
        categoryName.push(item.categorycode + '_' + item.categoryname)
      })
      this.categoryCode = categoryCode
      this.categoryName = categoryName
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    selectVisible(val) {
      if (!val) {
        this.selectedData = this.categoryName
      }
    },
    filterMethod(val) {
      this.filterValue = val
    },
    removeTag(value) {
      const category = this.$refs.tree.getCheckedNodes().find(item => (item.categorycode + '_' + item.categoryname) === value)
      this.$refs.tree.setChecked(category.categoryCode, false, false)
      this.selectedData = this.selectedData.filter(item => item !== (category.categorycode + '_' + category.categoryname))
    },
    getTreeInfo(list, rootNode = {}, id = 'categorycode', pid = 'parentcategorycode', text = 'categoryname') {
      const result = []
      const map = {}
      list.forEach(item => {
        item.label = item[text]
        map[item[id]] = item
        item.isLeaf = true
      })
      list.forEach(item => {
        const parent = map[item[pid]]
        if (parent) {
          (parent.children || (parent.children = [])).push(item)
        } else {
          result.push(item)
        }
      })
      return [{
        ...rootNode,
        children: result
      }]
    },
    // 获取品类
    fetchCategoryInfoList() {
      fetch('/mockapi/cate').then(res => res.json()).then(response => {
        this.treeData = this.getTreeInfo(response.data.cate)[0].children
      })
    },
    handleCheckAllChange(val) {
      const keys = val ? this.treeData.map(item => item.categorycode) : []
      // keys.map(item => {
      //   let data = item
      //   this.$refs.tree.setChecked(data, true)
      //
      //   // this.$nextTick((data)=>{
      //   //
      //   // })
      // })

      // setTimeout(()=>{
      this.$refs.tree.setCheckedKeys(keys)
      // }, 0)
    }
  }
}
</script>
<style>
  .tree-wrap .el-select{
    width: 100%;
  }
</style>
